<script setup lang="ts">


import LogicFlow from '@logicflow/core';
import '@logicflow/core/dist/style/index.css';
import '@logicflow/extension/lib/style/index.css'
import { Control } from '@logicflow/extension';
import { AutoLayout } from '@logicflow/extension';
import '@logicflow/extension/lib/style/index.css'

LogicFlow.use(Control);
// LogicFlow.use(AutoLayout);


import {CxygzlRectView,CxygzlRectModel} from './LogicFlow/CxygzlRectModel'
import {CxygzlCircleView,CxygzlCircleModel} from './LogicFlow/CxygzlCircleModel'
import {ProcessModel,FlyFlowPlyLineEdge} from './LogicFlow/FlyFlowPolyLineEdgeModel'
import {FlyFlowDiamondView,FlyFlowDiamondModel} from './LogicFlow/FlyFlowDiamondModel'


import {defineExpose,ref,onMounted} from "vue";


const lf =ref();

onMounted(()=>{
    view({
      "nodes": [
        {
          "x": 150,
          "y": 200,
          "width": 50,
          "height": 50,
          "id": "root",
          "text": "发起人",
          "type": "cxygzlCircle",
          "properties": {
            "status": 2
          },
          "x1": 0,
          "y1": 0,
          "x2": 0,
          "y2": 0,
          "x3": 0,
          "y3": 0,
          "x4": 0,
          "y4": 0
        },
        {
          "x": 300,
          "y": 200,
          "width": 60,
          "height": 100,
          "id": "flyflow_node_081035864274",
          "text": "条件分支",
          "type": "flyflowDiamond",
          "properties": {
            "status": 2
          },
          "x1": 0,
          "y1": 0,
          "x2": 0,
          "y2": 0,
          "x3": 0,
          "y3": 0,
          "x4": 0,
          "y4": 0
        },
        {
          "x": 450,
          "y": 50,
          "width": 100,
          "height": 50,
          "id": "flyflow_node_081035863803",
          "text": "(数字 等于 5)",
          "type": "cxygzlRect",
          "properties": {
            "status": 0
          },
          "x1": 0,
          "y1": 0,
          "x2": 0,
          "y2": 0,
          "x3": 0,
          "y3": 0,
          "x4": 0,
          "y4": 0
        },
        {
          "x": 600,
          "y": 50,
          "width": 100,
          "height": 50,
          "id": "flyflow_node_081106181188",
          "text": "审批人",
          "type": "cxygzlRect",
          "properties": {
            "status": 0
          },
          "x1": 0,
          "y1": 0,
          "x2": 0,
          "y2": 0,
          "x3": 0,
          "y3": 0,
          "x4": 0,
          "y4": 0
        },
        {
          "x": 750,
          "y": 50,
          "width": 60,
          "height": 100,
          "id": "flyflow_node_083249509274",
          "text": "并行分支",
          "type": "flyflowDiamond",
          "properties": {
            "status": 0
          },
          "x1": 0,
          "y1": 0,
          "x2": 0,
          "y2": 0,
          "x3": 0,
          "y3": 0,
          "x4": 0,
          "y4": 0
        },
        {
          "x": 900,
          "y": -25,
          "width": 100,
          "height": 50,
          "id": "flyflow_node_083249507109",
          "text": "满足条件",
          "type": "cxygzlRect",
          "properties": {
            "status": 0
          },
          "x1": 0,
          "y1": 0,
          "x2": 0,
          "y2": 0,
          "x3": 0,
          "y3": 0,
          "x4": 0,
          "y4": 0
        },
        {
          "x": 1050,
          "y": -25,
          "width": 100,
          "height": 50,
          "id": "flyflow_node_083271775383",
          "text": "审批人1",
          "type": "cxygzlRect",
          "properties": {
            "status": 0
          },
          "x1": 0,
          "y1": 0,
          "x2": 0,
          "y2": 0,
          "x3": 0,
          "y3": 0,
          "x4": 0,
          "y4": 0
        },
        {
          "x": 900,
          "y": 125,
          "width": 100,
          "height": 50,
          "id": "flyflow_node_083249504947",
          "text": "满足条件",
          "type": "cxygzlRect",
          "properties": {
            "status": 0
          },
          "x1": 0,
          "y1": 0,
          "x2": 0,
          "y2": 0,
          "x3": 0,
          "y3": 0,
          "x4": 0,
          "y4": 0
        },
        {
          "x": 1050,
          "y": 125,
          "width": 100,
          "height": 50,
          "id": "flyflow_node_083358611735",
          "text": "审批人2",
          "type": "cxygzlRect",
          "properties": {
            "status": 0
          },
          "x1": 0,
          "y1": 0,
          "x2": 0,
          "y2": 0,
          "x3": 0,
          "y3": 0,
          "x4": 0,
          "y4": 0
        },
        {
          "x": 1200,
          "y": 50,
          "width": 60,
          "height": 100,
          "id": "ba81bfd73c944a478e4aa68015eee5ef",
          "text": "聚合网关节点",
          "type": "flyflowDiamond",
          "properties": {
            "status": 0
          },
          "x1": 0,
          "y1": 0,
          "x2": 0,
          "y2": 0,
          "x3": 0,
          "y3": 0,
          "x4": 0,
          "y4": 0
        },
        {
          "x": 450,
          "y": 350,
          "width": 100,
          "height": 50,
          "id": "flyflow_node_081035866270",
          "text": "默认条件",
          "type": "cxygzlRect",
          "properties": {
            "status": 2
          },
          "x1": 0,
          "y1": 0,
          "x2": 0,
          "y2": 0,
          "x3": 0,
          "y3": 0,
          "x4": 0,
          "y4": 0
        },
        {
          "x": 600,
          "y": 350,
          "width": 100,
          "height": 50,
          "id": "flyflow_node_081142842084",
          "text": "抄送人",
          "type": "cxygzlRect",
          "properties": {
            "status": 2
          },
          "x1": 0,
          "y1": 0,
          "x2": 0,
          "y2": 0,
          "x3": 0,
          "y3": 0,
          "x4": 0,
          "y4": 0
        },
        {
          "x": 1350,
          "y": 200,
          "width": 60,
          "height": 100,
          "id": "7579a15e716545f9a541450ddc92c16c",
          "text": "聚合网关节点",
          "type": "flyflowDiamond",
          "properties": {
            "status": 0
          },
          "x1": 0,
          "y1": 0,
          "x2": 0,
          "y2": 0,
          "x3": 0,
          "y3": 0,
          "x4": 0,
          "y4": 0
        },
        {
          "x": 1500,
          "y": 200,
          "width": 100,
          "height": 50,
          "id": "flyflow_node_938553766869",
          "text": "审批人",
          "type": "cxygzlRect",
          "properties": {
            "status": 1
          },
          "x1": 0,
          "y1": 0,
          "x2": 0,
          "y2": 0,
          "x3": 0,
          "y3": 0,
          "x4": 0,
          "y4": 0
        },
        {
          "x": 1650,
          "y": 200,
          "width": 50,
          "height": 50,
          "id": "end",
          "text": "结束节点",
          "type": "cxygzlCircle",
          "properties": {
            "status": 0
          },
          "x1": 0,
          "y1": 0,
          "x2": 0,
          "y2": 0,
          "x3": 0,
          "y3": 0,
          "x4": 0,
          "y4": 0
        }
      ],
      "edges": [
        {
          "sourceNodeId": "root",
          "targetNodeId": "flyflow_node_081035864274",
          "type": "process"
        },
        {
          "sourceNodeId": "flyflow_node_081035864274",
          "targetNodeId": "flyflow_node_081035863803",
          "type": "process",
          "text": "(数字 等于 5)",
          "pointsList": [
            {
              "x": 330,
              "y": 200
            },
            {
              "x": 460,
              "y": 200
            },
            {
              "x": 460,
              "y": 75
            }
          ]
        },
        {
          "sourceNodeId": "flyflow_node_081035863803",
          "targetNodeId": "flyflow_node_081106181188",
          "type": "process"
        },
        {
          "sourceNodeId": "flyflow_node_081106181188",
          "targetNodeId": "flyflow_node_083249509274",
          "type": "process"
        },
        {
          "sourceNodeId": "flyflow_node_083249509274",
          "targetNodeId": "flyflow_node_083249507109",
          "type": "process",
          "text": "满足条件",
          "pointsList": [
            {
              "x": 780,
              "y": 50
            },
            {
              "x": 910,
              "y": 50
            },
            {
              "x": 910,
              "y": 0
            }
          ]
        },
        {
          "sourceNodeId": "flyflow_node_083249507109",
          "targetNodeId": "flyflow_node_083271775383",
          "type": "process"
        },
        {
          "sourceNodeId": "flyflow_node_083271775383",
          "targetNodeId": "ba81bfd73c944a478e4aa68015eee5ef",
          "type": "process",
          "pointsList": [
            {
              "x": 1100,
              "y": -25
            },
            {
              "x": 1210,
              "y": -25
            },
            {
              "x": 1210,
              "y": 0
            }
          ]
        },
        {
          "sourceNodeId": "flyflow_node_083249509274",
          "targetNodeId": "flyflow_node_083249504947",
          "type": "process",
          "text": "满足条件",
          "pointsList": [
            {
              "x": 780,
              "y": 50
            },
            {
              "x": 910,
              "y": 50
            },
            {
              "x": 910,
              "y": 100
            }
          ]
        },
        {
          "sourceNodeId": "flyflow_node_083249504947",
          "targetNodeId": "flyflow_node_083358611735",
          "type": "process"
        },
        {
          "sourceNodeId": "flyflow_node_083358611735",
          "targetNodeId": "ba81bfd73c944a478e4aa68015eee5ef",
          "type": "process",
          "pointsList": [
            {
              "x": 1100,
              "y": 125
            },
            {
              "x": 1210,
              "y": 125
            },
            {
              "x": 1210,
              "y": 100
            }
          ]
        },
        {
          "sourceNodeId": "ba81bfd73c944a478e4aa68015eee5ef",
          "targetNodeId": "7579a15e716545f9a541450ddc92c16c",
          "type": "process",
          "pointsList": [
            {
              "x": 1230,
              "y": 50
            },
            {
              "x": 1360,
              "y": 50
            },
            {
              "x": 1360,
              "y": 150
            }
          ]
        },
        {
          "sourceNodeId": "flyflow_node_081035864274",
          "targetNodeId": "flyflow_node_081035866270",
          "type": "process",
          "text": "默认条件",
          "pointsList": [
            {
              "x": 330,
              "y": 200
            },
            {
              "x": 460,
              "y": 200
            },
            {
              "x": 460,
              "y": 325
            }
          ]
        },
        {
          "sourceNodeId": "flyflow_node_081035866270",
          "targetNodeId": "flyflow_node_081142842084",
          "type": "process"
        },
        {
          "sourceNodeId": "flyflow_node_081142842084",
          "targetNodeId": "7579a15e716545f9a541450ddc92c16c",
          "type": "process",
          "pointsList": [
            {
              "x": 650,
              "y": 350
            },
            {
              "x": 1360,
              "y": 350
            },
            {
              "x": 1360,
              "y": 250
            }
          ]
        },
        {
          "sourceNodeId": "7579a15e716545f9a541450ddc92c16c",
          "targetNodeId": "flyflow_node_938553766869",
          "type": "process"
        },
        {
          "sourceNodeId": "flyflow_node_938553766869",
          "targetNodeId": "end",
          "type": "process"
        }
      ]
    })
})


const view = (d) => {


    lf.value = new LogicFlow({
      container: document.querySelector('#container'),
      // stopScrollGraph: true,
      // stopZoomGraph: true,
      width: screen.width*0.8-100,
      height: screen.height*0.6,
      grid: true,
      isSilentMode: false

    });

    lf.value.register({
      type: 'flyflowDiamond',
      view: FlyFlowDiamondView,
      model: FlyFlowDiamondModel,
    });
    lf.value.register({
      type: 'process',
      view: FlyFlowPlyLineEdge,
      model: ProcessModel,
    });
    lf.value.register({
      type: 'cxygzlRect',
      view: CxygzlRectView,
      model: CxygzlRectModel,
    });
    lf.value.register({
      type: 'cxygzlCircle',
      view: CxygzlCircleView,
      model: CxygzlCircleModel,
    });
    // lf.value.setTheme({
    //   nodeText: { // 节点文本样式
    // 	  fontSize: 10,
    // 	  color: '#000000'
    //   },
    //
    //   rect: {
    // 	  width: 50,
    // 	  height: 40,
    // 	  radius: 6
    //   },
    // })
    lf.value.render(d);





}
defineExpose({view});




</script>

<template>


  <div   id="container"></div>

</template>

<style scoped lang="less">

</style>
